<!-- 
    设置语言
    通过vue-i18n进行中英文转换
 -->
<template>
    <div class="lang">
        <el-dropdown size="default" @command="handleCommand">
            <span class="el-dropdown-link">
                {{ $i18n.locale == 'zh' ? '中文' : 'English' }}
                <el-icon>
                    <ArrowDown />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="zh" :disabled="$i18n.locale == 'zh'">中文</el-dropdown-item>
                    <el-dropdown-item command="en" :disabled="$i18n.locale == 'en'">English</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'//消息提示
import { ArrowDown } from '@element-plus/icons-vue';//图标 
import { useI18n } from 'vue-i18n'//引入useI18n函数设置语言
const { locale } = useI18n()//实例化useI18n()
// 触发显示下拉菜单的回调事件
let emit = defineEmits(['tongue'])
const handleCommand = (e: string) => {
    locale.value = e;
    localStorage.setItem('language', e)//赋值并在本地存储
    emit('tongue')
    ElMessage.success('设置成功')
}
</script>
<style lang="less" scoped>
.lang {
    display: inline-block;
    transform: translateY(20%);
    margin: 0px 10px;

    .el-dropdown-link {
        cursor: pointer;
    }
}
</style>

